<template>
  <view>
    <view class="navbar-wrap">
      <view :class="['column',isFixedTop?'fixed':'']" :style="{background: background}" id="navbar">
        <view style="font-size:36rpx" class="block">个人中心</view>
        <view style="font-size:28rpx;" class="block">管理</view>
      </view>
       <view class="column" v-if="isFixedTop"></view>
     </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navbarInitTop: 0, //导航栏初始化距顶部的距离
      isFixedTop: true, //是否固定顶部
      background: "" // 为了实现渐变背景颜色
    };
  },
  onShow: function() {
    if (this.navbarInitTop == 0) {
      //获取节点距离顶部的距离
      wx.createSelectorQuery()
        .select("#navbar")
        .boundingClientRect(function(rect) {
          if (rect && rect.top > 0) {
            var navbarInitTop = parseInt(rect.top);
            this.navbarInitTop = navbarInitTop;
          }
        })
        .exec();
    }
  },

  /**
   * 监听页面滑动事件
   */
  onPageScroll: function(e) {
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
    this.background = `rgba(0, 0, 0,${scrollTop / (scrollTop + 60)})`;
    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
    var isSatisfy = scrollTop >= this.navbarInitTop ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (this.isFixedTop === isSatisfy) {
      return false;
    }
    this.isFixedTop = isSatisfy;
  }
};
</script>
<style lang="scss" scoped>
.navbar-wrap {
  width: 100%;
}

.navbar-wrap .column {
  width: 100%;
  padding:45rpx 182rpx 10rpx 30rpx;
  display: flex;
  justify-content: space-between;
  background: transparent;
  top: 0;
  left: 0;
  z-index: 100;
}

.navbar-wrap .column.fixed {
  position: fixed;
}
.navbar-wrap .column .block {
  font-size: 32rpx;
  width: 30%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  letter-spacing: 1px;
  position: relative;
  &:nth-child(2){
    width: 20%;
  }
}
</style>